
<!-- 调配受理状态 -->
<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    status-icon
    label-width="120px"
    class="demo-ruleForm"
  >
    <el-form-item label="受理学员" prop="studentId" required>
      <el-select-v2
        v-model="ruleForm.studentId"
        :options="options"
        placeholder="请选择受理学员"
        style="width: 240px"
        multiple
      />
    </el-form-item>

    <el-form-item label="受理状态" prop="state ">
      <el-select
        v-model="ruleForm.state"
        placeholder="选择受理状态"
        style="width: 240px"
        required
      >
        <el-option
          v-for="item in AcceptanceState"
          :label="item"
          :value="item"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="受理日期" prop="stateTime" required>
      <el-date-picker
        v-model="ruleForm.stateTime"
        style="width: 240px"
        type="data"
        placeholder="请选择受理日期"
      />
    </el-form-item>

    <el-form-item>
      <el-button type="success" @click="submitForm(ruleFormRef)"
        >确认保存</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from "vue";
import type { FormInstance } from "element-plus";
import { StuStatePost } from "../../../api/students";
import { ElMessage } from "element-plus";
const props = defineProps({
  data: String,
});

const emit = defineEmits(["update:modelValue", "handleref"]);

//受理人员框
// 处理数据穿给受理转台页面
interface StateType {
  value: string;
  label: string;
}
const StateDate = (arr: any) => {
  let newArr: StateType[] = [];
  arr.forEach((item: any) => {
    newArr.push({ value: item.objectId, label: item.name });
  });
  return newArr;
};
let checkedStu = props.data as string;
watch(
  () => props.data,
  () => {
    options.value = StateDate(JSON.parse(checkedStu));
    for (let i = 0; i < JSON.parse(checkedStu).length; i++) {
      console.log(JSON.parse(checkedStu)[i]);
      if (JSON.parse(checkedStu)[i].MoneyState === "未缴费") {
        payState.value = false;
        break;
      }
    }
  }
);
onMounted(() => {
  options.value = StateDate(JSON.parse(checkedStu));
  for (let i = 0; i < JSON.parse(checkedStu).length; i++) {
    if (JSON.parse(checkedStu)[i].MoneyState === "未缴费") {
      payState.value = false;
      break;
    }
  }
});
let options = ref<StateType[]>([]);
// 受理状态框
const AcceptanceState = ref<string[]>([
  "未受理",
  "体检",
  "预录入",
  "受理中",
  "受理失败",
  "受理完成",
]);

const ruleFormRef = ref<FormInstance>();
const ruleForm = ref({
  studentId: [],
  state: "",
  stateTime: "",
});

let payState = ref<boolean>(true);
const submitForm = (formEl: FormInstance | undefined) => {
  if (payState.value) {
    if (!formEl) return;
    formEl.validate(async (valid) => {
      if (valid) {
        await StuStatePost(ruleForm.value);
        formEl.resetFields();
        emit("update:modelValue", false);
        emit("handleref");
      } else {
        console.log("error submit!");
        return false;
      }
    });
  } else {
    ElMessage({
      message: "操作失败，请检查选中学员的缴费情况",
      type: "error",
    });
  }
};
</script>
